<template>
<!-- 余额变化控件 -->
  <div :class="'balance_change '+type">
      {{type==='add'?'+':'-'}}
      {{amount}}
      <!-- +0.000444 -->
  </div>
</template>

<script>
export default {
    props:['type','amount']
}
</script>

<style lang="scss" scoped>
.balance_change{
    font-size: .13rem;
    position: absolute;
    top: .2rem;
    left: .75rem;
}
.add{
    color: #3AFFBF;
    animation: add .3s linear;
}
.cut{
    color: #FE624E;
    animation: cut .3s linear;
}
@keyframes add {
    0%{
        transform: translate(0,.2rem);
        opacity: 0;
    }
    100%{
        transform: translate(0,0);
        opacity: 1;
    }
}
@keyframes cut {
    0%{
        transform: translate(0,0);
        opacity: 1;
    }
    100%{
        transform: translate(0,.2rem);
        opacity: 0;
    }
}
</style>